<template lang="html">
  <footer class="soft-shadow">
    <ul>
      <router-link :to="{ name: item.router, }" v-for="(item, index) in menu" :key="index" class="footer-btn" :class="{'active': item.id === active}">
        <div class="footer-icon">
          <i class="iconfont" :class="item.icon"></i>
          <!-- <span class="footer-icon-info"></span> -->
        </div>
        <span class="footer-icon-title">{{item.name}}</span>
      </router-link>
    </ul>
  </footer>
</template>

<script>
import { menu } from '@/assets/js/config'
export default {
  data() {
    let data = {}
    data.menu = menu
    return data
  },
  props: {
    active: {
      type: Number,
      default: 0,
    }
  }
}
</script>

<style lang="less" scoped>
  @border: #D9D9D9;
  @grey: #666666;
  @blue: #078DFF;
  @red: #F40226;
  @white: #FFFFFF;
  @green: #05C911;
  @orange: #FC6932;
  footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0.9rem;
    z-index: 1;
    background-color: @white;
    display: flex;
    align-items: center;
    ul {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .footer-btn {
        width: 25%;
        display: flex;
        flex-direction: column;
        text-align: center;
        text-decoration: none;
        .iconfont {
          font-size: .45rem;
          line-height: .5rem;
          color: @grey;
        }
        .footer-icon-title {
          color: @grey;
          font-size: .2rem;
        }
        &.active {
          .iconfont {
            color: @blue;
          }
          .footer-icon-title {
            color: @blue;
          }
        }
      }
    }
  }
  .soft-shadow {
    box-shadow: 0 -5px 10px 0 rgba(0,64,128,.05);
  }
</style>
